<template>
	<view>
    <!-- block 标签编组，长度不为 0 的时候展示列表 -->
    <block v-if="cartList.length !== 0">
      <view class="cart_item" v-for="(item,index) in cartList" :key="item.goods_id">
        <view @tap="changeItemSelect(index)" class="cart_item_left">
            <radio color="#EB4450" :checked="item.isSelect" />
        </view>
        <view class="cart_item_right">
          <goodsItem :item="item"></goodsItem>
        </view>
        <!-- 定位的计数器 -->
        <view class="cart_item_count">
          <text @tap="changeItemCount(index, -1)" class="cart_item_count_icon">-</text>
          <text class="cart_item_count_number">{{ item.goods_count }}</text>
          <text @tap="changeItemCount(index, 1)" class="cart_item_count_icon">+</text>
        </view>
      </view>
      <view class="bottom_bar">
      <view class="bottom_bar_group">
        <label class="select_all" @tap="changeSelectAll">
          <radio class="select_all_btn" color="#EB4450" :checked="selectAll" />
          <text class="select_all_text">全选</text>
        </label>
        <text class="total">
          合计：<text class="total_price">{{ totalPrice }}</text>
        </text>
      </view>
      <view @tap="goToPay" class="pay_btn">
        去结算({{ totalCount }})
      </view>
    </view>
    </block>
    <!-- 空购物车状态展示 -->
    <view v-else class="cart_empty">
      <view class="cart_empty_tips">
        购物车为空
      </view>
      <navigator open-type="switchTab" url="/pages/index/index">去首页看看</navigator>
    </view>
    
  </view>
</template>

<script>
/*
  1. 在 onShow 页面显示的时候获取最新的购物车数据
    知识点：微信小程序生命周期
  2. 导入，注册 并 使用 goodsItem 组件实现商品列表
    知识点：组件数据父传子
  3. 底部栏计算功能：
    知识点：computed 计算
    1. 计算 "全选状态"     所有的都选中才能选中
    2. 计算 "总价格"       选中的商品 ， 单价 * 数量  的累加结果
    3. 计算 "选中商品种类"(淘宝)  或  "选中商品总件数"(京东)
  4. 商品选择按钮
    知识点：事件绑定
    1. 如果希望有更大的触发区域，可以把事件绑定为按钮的父级元素。
    2. 让当前的选择状态取反。
  
  5. 商品数量计数器  
    知识点：模态窗口API
    1. 点击加号，商品数量 +1 即可
    2. 点击减号，商品数量 -1 
      1. 如果当前商品数量为 1，点击减号的时候提示用户是否要删除
        1. 点击确定就删除当前商品。
        
  6. 监听 cartList 数据变化，数据变化就更新本地存储 
      知识点：watch 数据监听
      
  7. 全选按钮
      1. 点击的时候，把原本的状态取反
      2. 通过 forEach 把状态更新到购物车列表的每个商品中
      
      
  8. 购物车列表空状态
      1. v-if="cartList.lenth === 0" 判断数组长度是否不为 0 ，展示 购物车列表
      2. v-else 长度为 0 的情况，展示空购物车状态
  
  9. 点击去结算按钮
      1. 判断选中的商品种类是否为 0，提示 "你还没选择商品哦"
      2. 选中商品的情况，跳转到支付页
      
  
*/ 
  
  import goodsItem from '../../components/goodsItem/index.vue';
	export default {
    components:{
      goodsItem
    },
		data() {
			return {
				cartList: [],
			}
		},
    // 监听 cartList 数据变化，数据变化就更新本地存储
    watch: {
      // watch 默认只监听到第一层数据的变化
      cartList: {
        // 如果希望能监听更复杂数据的变化，改成 deep 的这种写法
        deep: true,
        // handler 单词不要写错
        handler() {
          // console.log('数据发生了变化');
          uni.setStorageSync('cartList', this.cartList);
        }
      }
    },
    // 计算属性 
    computed:{
      // 计算全选
      selectAll(){
        // !! 把所有的商品都删除掉的时候，会发现 every() 实现的全选会有一个小 bug，自己探索一下是否能找到解决方案。
        // every() 如果数组每一项条件都为 true，最终结果为 true，有一项结果为 false，最终结果为 false
        // 如果是空数组主动返回 false
        if(this.cartList.length === 0) return false;
        // 其他情况返回计算得到的布尔值
        return this.cartList.every(item=>item.isSelect);
      },
      // 计算总价格       1. 选中的商品       2. 单价 * 数量  累加的结果
      totalPrice(){
        let sum = 0;
        // 遍历数组每一项
        this.cartList.forEach(item=>{
          // 是否为选中的商品
          if(item.isSelect){
            // 价格累加
            sum += item.goods_price * item.goods_count;
          }
        });
        return sum;
      },
      // 选中的商品种类   <淘宝>计算规则
      // 选中商品总件数   <京东>计算规则
      totalCount(){
        // 选中的商品种类 <淘宝>计算规则  filter 过滤
        return this.cartList.filter(item=>item.isSelect).length;
        // 选中商品总件数 <京东>计算规则
        // let count = 0;
        // this.cartList.forEach(item=>{
        //   if(item.isSelect){
        //     count += item.goods_count;
        //   }
        // })
        // return count;
      },
      
    },
    // 显示购物车页面的时候需要使用最新的数据
		onShow() {
      // 获取本地存储的购物车列表数据
      const cartList =  uni.getStorageSync('cartList') || [];
      this.cartList = cartList;
      
      console.log(cartList);
      
		},
		methods: {
      goToPay(){
        if(this.totalCount===0){
          uni.showToast({
            title:'你还没选择商品哦.',
            icon: 'none'
          })
        }else{
          // console.log('跳转到结算页');
          uni.navigateTo({
            url:"/pages/pay/index"
          });
        }
      },
      // 全选按钮
      changeSelectAll(){
        // console.log(this.selectAll);
        // 状态取反
        const selectStatus = !this.selectAll;
        // 把状态更新到购物车列表的每个商品中
        this.cartList.forEach(item=> item.isSelect = selectStatus);
      },
      // 商品选择按钮
      changeItemSelect(index) {
        // console.log(index);
        this.cartList[index].isSelect = !this.cartList[index].isSelect;
      },
      // 商品计数器
      changeItemCount(index, number) {
        // console.log({index, number});
        if (this.cartList[index].goods_count === 1 && number === -1) {
          // console.log('提示是否删除');
          uni.showModal({
            content: '是否舍得删除呢？',
            confirmText: '删除',
            confirmColor: '#ccc',
            // title: "是否舍得删除呢？",
            success: res => {
              // console.log(res);
              // 如果用户点击了确定
              if (res.confirm) {
                this.cartList.splice(index, 1);
              }
            }
          });
        } else {
          // 其他情况下
          this.cartList[index].goods_count += number;
        }
      }
		}
	}
</script>

<style lang="less">
  .cart_item{
    display: flex;
    position: relative;
    .cart_item_left{
      width: 100rpx;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 20rpx;
      box-sizing: border-box;
    }
    .cart_item_right{
      flex:1;
    }
    .cart_item_count{
      position: absolute;
      right:20rpx;
      bottom:20rpx;
      display: flex;
      background-color: hotpink;
      .cart_item_count_icon{
        width: 32rpx;
        height: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .cart_item_count_number{
        // 最小宽度，对齐更好
        min-width: 75rpx;
        display: flex;
        justify-content: center;
      }
    }
  }
  .bottom_bar{
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    height: 84rpx;
    border-top:1rpx solid #ccc;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .bottom_bar_group{
      
    }
    .select_all{
      
    }
    .select_all_btn{
      
    }
    .select_all_text{
      
    }
    .total{
      
    }
    .total_price{
      color: var(--mainColor);
      &::before{
        content: "¥";
      }
    }
    .pay_btn{
      background-color: var(--mainColor);
      color:#fff;
      border-radius: 30rpx;
      height: 50rpx;
      width: 150rpx;
      font-size: 22rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .cart_empty{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>
